// 设置频道下拉菜单

// 1.1 获取列表数据，展示逻辑进行封装

// 文章封面设置


async function setChannelList(){
    // 基于axios获取数据
   const res = await axios({
        url:'http://geek.itheima.net/v1_0/channels'
    })
    console.log(res);
    const htmlStr = res.data.data.channels.map(item=>
    `<option value="${item.id}" selected="">${item.name}</option>`).join('')
    console.log(htmlStr);
    document.querySelector('.form-select').innerHTML = htmlStr
}

// =============================================
// function setChannelList(){
//     // axios请求
//     axios({
//         url:'http://geek.itheima.net/v1_0/channels'
//     }).then(result=>{
//         console.log(result);
//         console.log(result.data.data.channels);
//         const res =result.data.data.channels.map(item=>
//            `<option value="${item.id}" selected="">${item.name}</option>`
//         )
//         console.log(res);
//     })
// }


//*   封面设置  */
// 将文章封面插入盒子,点击发布后合并发出


    const form = document.querySelector('.img-file').addEventListener('change',async e=>{
        console.log(e.target);
        const file = e.target.files[0]
        const fd = new FormData()
        fd.append('image',file)
    
        const res = await axios({
            url:'http://geek.itheima.net/v1_0/upload',
            method:'POST',
            data:fd
    
        })
        console.log(res);
    
        const imgUrl = res.data.data.url
        console.log(imgUrl);
        document.querySelector('.rounded').src = imgUrl
        document.querySelector('.rounded').classList.add('show')
        document.querySelector('.place').classList.add('hide') 
    })



// 优化：点击img可以重新切换封面
// 方法：img点击=>用JS方法触发文件选择元素click事件

document.querySelector('.rounded').addEventListener('click',()=>{
    document.querySelector('.img-file').click()
})

// 使用form-serialize在点击事件后执行，用来收集form表单信息

document.querySelector('.send').addEventListener('click',async e=>{
    const ser = document.querySelector('.art-form')
    const data = serialize(ser, {hash: true , empty : true})
    delete data.id
    console.log(data);
    data.cover = {
        type:1,
        images:[document.querySelector('.rounded').src]
    }
    //基于axios提交到数据库保存
     try {
    const res = await axios({
        url:'http://geek.itheima.net/v1_0/mp/articles',
        method:'POST',
        data:data
    })
    myalert(true,"提交成功")


    // reset只能清空表单元素
    ser.reset()

    // 封面手动重置
    document.querySelector('.rounded').src = ''
    document.querySelector('.rounded').classList.remove('show')
    document.querySelector('.place').classList.remove('show') 

    // 重置富文本编辑器
    editor.setHtml('')
    setTimeout(()=>{
        location.href = '../content/index.html'
    },3000)
    } catch (error) {
    console.dir(error);
    myalert(false,error.response.data.message)
}

   
   
})

// 发布文章，收集保存


// 步骤：
// 基于form-serialize插件收集表单数据对象
// 基于axios提交到服务器保存
// 调用alert警告框反馈结果给i用户
// 重置表单







// 默认网页运行默认调用一次
setChannelList()
// 改变封面
